<template>
  <div class="outer-padding">
    <div class="ds-title pd-bottom--32">账号激活申请</div>
    <div class="fl pd-bottom--32">
      <a-button type="primary" class="mr-8" @click="getActive">一键激活</a-button>
      <a-button type="primary" @click="getActive">批量激活</a-button>
      <div class="mla">
        <a-input-search
          style="width: 480px"
          v-model:value="queryParam.account"
          placeholder="搜索公告"
          @search="onSearch"
        >
        </a-input-search>
      </div>
    </div>
    <dynamic-table
      ref="tableRef"
      :columns="columns"
      :get-list-func="loadData"
      rowKey="id"
      :row-selection="rowSelection"
    >
      <template #notice="{ record }">
        <p class="text-overflow" style="width: 180px">{{ record.cparagraph }}</p>
      </template>
      <template #limit="{ record }">
        <a-select v-model:value="record.limit" placeholder="请选择" style="width: 100px">
          <a-select-option :value="1">30天</a-select-option>
          <a-select-option :value="2">1年</a-select-option>
          <a-select-option :value="3">2年</a-select-option>
          <a-select-option :value="4">3年</a-select-option>
        </a-select>
      </template>
      <template #status="{ record }">
        <div class="df aic">
          <a-switch v-model:checked="record.status" />
          <span class="ml-8 font333" v-if="record.status">已激活</span>
          <span class="ml-8 font999" v-else>未激活</span>
        </div>
      </template>
    </dynamic-table>
  </div>
</template>
<script lang="ts">
  import { defineComponent, reactive, toRefs, ref, onMounted } from 'vue'
  import { DynamicTable, TableQueryHeader } from '@/components/dynamic-table'
  import { useRoute } from 'vue-router'
  import { useStore } from '@/store'
  import { columns } from './columns'
  import { getActiveList, postActive } from '@/api/system'
  import { Modal } from 'ant-design-vue'

  export default defineComponent({
    name: 'Markcomponent',
    components: {
      DynamicTable,
    },
    setup() {
      const tableRef = ref<InstanceType<typeof DynamicTable>>()

      const valueDate = ref<moment.Moment[]>([])

      const route = useRoute()

      const store = useStore()

      const state = reactive({
        queryParam: {
          account: null,
        },
      })

      /**
       * @description 加载表格数据
       */
      const loadData = (params) => {
        const myParams = { ...params, ...state.queryParam }
        return getActiveList(myParams)
      }

      const rowSelection = {
        onChange: (selectedRowKeys: (string | number)[], selectedRows: any[]) => {
          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
        },
        onSelect: (record: any, selected: boolean, selectedRows: any[]) => {
          console.log(record, selected, selectedRows)
        },
        onSelectAll: (selected: boolean, selectedRows: any[], changeRows: any[]) => {
          console.log(selected, selectedRows, changeRows)
        },
      }

      const onSearch = (ev) => {
        console.log(ev)
      }

      const getActive = () => {
        Modal.confirm({
          title: '确认激活这些账号吗？',
          onOk: async () => {
            await postActive({})
          },
        })
      }

      onMounted(async () => {})

      return {
        ...toRefs(state),
        tableRef,
        onSearch,
        columns,
        loadData,
        rowSelection,
        getActive,
      }
    },
  })
</script>
